<template>
	<view class="container">
		<view class="warp u-m-t-20">
			<view class="count u-p-t-36 u-p-b-10 u-flex u-row-center">
				<u-count-to
					class="count-to"
					ref="uCountTo"
					:autoplay="autoplay"
					:startVal="startVal"
					:endVal="endVal"
					:duration="duration"
					:decimals="decimals"
					:bold="bold"
					:fontSize="fontSize"
					:color="color"
				></u-count-to>
				<text class="u-m-l-10">名优秀伙伴为您服务</text>
			</view>

			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition" label="我是" prop="ws">
					<u-input
						:border="border"
						type="select"
						:select-open="selectShowWs"
						v-model="model.ws"
						placeholder="请选择"
						placeholderStyle="color: #4B9CFF;"
						input-align="right"
						@click="selectShowWs = true"
					></u-input>
				</u-form-item>
				<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition" label="我需要" prop="wxy">
					<u-input
						:border="border"
						type="select"
						:select-open="selectShowWxy"
						v-model="model.wxy"
						placeholder="请选择"
						placeholderStyle="color: #4B9CFF;"
						input-align="right"
						@click="selectShowWxy = true"
					></u-input>
				</u-form-item>
				<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition" label="我意向" prop="wyx">
					<u-input
						:border="border"
						type="select"
						:select-open="selectShowWyx"
						v-model="model.wyx"
						placeholder="请选择"
						placeholderStyle="color: #4B9CFF;"
						input-align="right"
						@click="selectShowWyx = true"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="社员性别" prop="syxb">
					<u-input
						type="select"
						:select-open="selectShowSyxb"
						v-model="model.syxb"
						placeholder="请选择"
						placeholderStyle="color: #0D1D36;"
						input-align="right"
						@click="selectShowSyxb = true"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="社员年龄" prop="synl">
					<u-input :border="border" placeholder="请输入年龄段" v-model="model.synl" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="社员地域" prop="sydy">
					<u-input
						type="select"
						:select-open="selectShowSydy"
						v-model="model.sydy"
						placeholder="请选择"
						placeholderStyle="color: #0D1D36;"
						input-align="right"
						@click="selectShowSydy = true"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="履约信誉" prop="lyxy">
					<u-input
						type="select"
						:select-open="selectShowLyxy"
						v-model="model.lyxy"
						placeholder="请选择"
						placeholderStyle="color: #0D1D36;"
						input-align="right"
						@click="selectShowLyxy = true"
					></u-input>
				</u-form-item>

				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="资格证书" prop="zgzs">
					<u-input :border="border" placeholder="请输入" v-model="model.zgzs" type="text" input-align="right"></u-input>
				</u-form-item>
			<!-- 	<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="智汇号" prop="qymc">
					<u-input :border="border" placeholder="请输入" v-model="model.qymc" type="text" input-align="right"></u-input>
				</u-form-item> -->
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="智汇号" prop="zhh">
					<u-input
						type="select"
						:select-open="selectShowzhh"
						v-model="model.zhh"
						placeholder="请选择"
						placeholderStyle="color: #0D1D36;"
						input-align="right"
						@click="selectShowzhh = true"
					></u-input>
				</u-form-item>
				<u-gap :bg-color="bgColor" :height="height"></u-gap>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="关键字" prop="gjz">
						<u-input :border="border" placeholder="请输入" v-model="model.gjz" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="屏蔽关键字" prop="pbgjz">
						<u-input :border="border" placeholder="请输入" v-model="model.pbgjz" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false"
					 label="匹配时效" prop="ppsx">
						<u-input type="select" :select-open="selectShowPpsx" v-model="model.ppsx" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowPpsx = true"></u-input>
					</u-form-item>
					<u-gap :bg-color="bgColor" :height="height"></u-gap>
					<view class="u-flex u-row-start qita u-p-30">
						<image src="../../static/img/shuoming.png"></image>
						<view class="u-m-l-20">其他说明</view>
				
					</view>
					<u-form-item class="zwpj u-m-l-30 u-m-r-30 " :label-position="labelPosition" prop="qtsm">
						<u-input type="textarea" :border="border" placeholder="请输入其他说明" v-model="model.qtsm" />
					</u-form-item>
				</u-form>
				
			</u-form>
		</view>
		<view class="warp" style="border: 1px solid #ffffff;">
		<!-- 	<view class="word">选择几个关键词，为您更精准匹配。</view>
			<view class="keywords u-m-t-40">
				<view :class="{'selected':item.selected}" v-for="(item, index) in keywords" :key="index" @click="selectKey(index)">{{ item.name }}<text></text></view>
			</view> -->
			<u-button class="button" @click="submit">马上为我匹配</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="wsList1" v-model="selectShowWs" @confirm="selectConfirmWs"></u-select>
			<u-select mode="single-column" :list="wxyList" v-model="selectShowWxy" @confirm="selectConfirmWxy"></u-select>
			<u-select mode="single-column" :list="wyxList" v-model="selectShowWyx" @confirm="selectConfirmWyx"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowSydy" @confirm="selectConfirmSydy"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowQydy" @confirm="selectConfirmQydy"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowLyxy" @confirm="selectConfirmLyxy"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowzhh" @confirm="selectConfirmzhh"></u-select>
			<u-select mode="single-column" :list="sexList" v-model="selectShowSyxb" @confirm="selectConfirmSyxb"></u-select>
			<u-select mode="single-column" :list="dataList" v-model="selectShowPpsx" @confirm="selectConfirmPpsx"></u-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
export default {
	data() {
		let that = this;
		return {
			height: 20,
			bgColor: this.$u.color.bgColor,
			/**
			 * form验证
			 * */
			model: {
				ws: '',
				wxy: '',
				wyx: '',
				qymc: '',
				syxb: '',
				synl: '',
				sydy: '',
				lyxy: '',
				zgzs: '',
				zhh: '',
				gjz: '',
				pbgjz: '',
				ppsx: '',
				qtsm: '',
			},
			selectList: [
				{
					value: '测试11',
					label: '测试11'
				},
				{
					value: '测试21',
					label: '测试21'
				},
				{
					value: '测试31',
					label: '测试31'
				}
			],
			dataList: [
				{
					value: '2020-11-10',
					label: '2020-11-10'
				},
				{
					value: '2020-12-10',
					label: '2020-12-10'
				},
				{
					value: '2020-12-20',
					label: '2020-12-20'
				}
			],
			wsList1:[
				{
					value: '个人',
					label: '个人'
				},
				{
					value: '企业',
					label: '企业'
				},
				{
					value: '团队',
					label: '团队'
				}
			],
			wsList:[],
			wxyList:[],
			wyxList:[],
			sexList: [
				{
					value: '不限',
					label: '不限'
				},
				{
					value: '男',
					label: '男'
				},
				{
					value: '女',
					label: '女'
				},
			],
			rules: {
				qymc: [
					{
						required: false,
						message: '请输入企业名称',
						trigger: 'blur'
					}
				],
				ws: [
					{
						required: false,
						message: '请选择我是',
						trigger: 'change'
					}
				],
				wxy: [
					{
						required: false,
						message: '请选择我需要',
						trigger: 'change'
					}
				],
				wyx: [
					{
						required: false,
						message: '请选择我意向',
						trigger: 'change'
					}
				]
			},
			sex: 0,
			id: 0,
			iam: 0,
			required: false,
			border: false,
			check: false,
			selectStatus: 'close',
			selectShowWs: false,
			selectShowWxy: false,
			selectShowWyx: false,
			selectShowQylx: false,
			selectShowSydy: false,
			selectShowLyxy: false,
			selectShowzhh:false,
			selectShowSyxb: false,
			selectShowPpsx: false,
			labelPosition: 'left',
			codeTips: '',
			errorType: ['toast'],
			reqBody: {},
			/**/

			/**
			 * 数字统计
			 * */
			startVal: 500,
			endVal: 500,
			separator: ',',
			decimals: 0,
			duration: 2000,
			autoplay: true,
			useEasing: true,
			current: 3,
			isStop: false,
			bold: false,
			fontSize: 24,
			color: '#fff',
			/**/
			keyIndex:0,
			keywords: [{name:'性别',selected:true},{name:'研究生',selected:false},{name:'职称',selected:false},{name:'执业资格',selected:false},{name:'人数',selected:false},{name:'研究生',selected:false}]
		};
	},
	mounted() {},
	onShow(){
		this.wsDictionary();
		this.wxyDictionary();
		this.wyxDictionary();
	},
	onLoad(options){
		let id = options.id;
		if(id) this.id = id;
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		//创建个人公社邀请
		async submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					this.communeMatching();
				} else {
					console.log('验证失败');
				}
			});
			
		},
		async communeMatching(){
			try {
				this.reqBody['communeId'] = this.id;
				this.reqBody['sex'] = this.sex;
				this.reqBody['age'] = this.model.synl;
				this.reqBody['area'] = this.model['sydy'];
				this.reqBody['lyxy'] = this.model['lyxy'];
				this.reqBody['zgzs'] = this.model['zgzs'];
				this.reqBody['zhh'] = this.model['zhh'];
				this.reqBody['gjc'] = this.model['gjz'];
				this.reqBody['bbgjz'] = this.model['pbgjz'];
				this.reqBody['remark'] = this.model['qtsm'];
				this.reqBody['ppsx'] = this.model['ppsx'];
				this.reqBody['iam'] = this.iam;
				this.reqBody['imean'] = this.model.wyx;
				this.reqBody['ineed'] = this.model.wxy;
				let data = await this.$apis.communeMatching(this.reqBody);
				console.log(JSON.stringify(data));
				if (data.code == 200) {
					uni.showToast({
						title: "公社匹配信息成功",
						icon: 'none'
					});
					setTimeout(() => {
						this.$mRouter.switchTab({
							route:this.$mRoutesConfig.message
						});
					},2000)
			
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
					return;
				}
			} catch (e) {
				console.log(e);
				this.submitBtnDis = false;
			}
		},
		async CommuneUTeam(){
			try {
				this.reqBody['sex'] = this.model['syxb'];
				this.reqBody['workingSeniority'] = this.model['synl'];
				this.reqBody['workplace'] = this.model['sydy'];
				let data = await this.$apis.CommuneUTeam(this.reqBody);
				console.log(JSON.stringify(data));
				// uni.setStorageSync("userInfo",data);
				if(data.code == 200){
					uni.showToast({
							title: "个人公社完善信息成功",
							icon: 'none'
					});
					this.$mRouter.switchTab({
						route:this.$mRoutesConfig.index
					});
				}else{
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
					return;
				}
			} catch (e) {
				console.log(e);
				this.submitBtnDis = false;
			}
		},
		//查询匹配 我是  字典数据
		async wsDictionary(){
			let reqBody = {};
			reqBody['primary'] = "招投标";
			reqBody['secondary'] = "我是";
			let result = await this.$apis.findMatchingDictionary(reqBody);
			let list = result.data;
			for (let i = 0; i < list.length; i++) {
				let wsValue = {};
				wsValue['value'] = list[i].name;
				wsValue['label'] = list[i].name;
				this.wsList.push(wsValue)
			}
		},
		//查询匹配 我需要  字典数据
		async wxyDictionary(){
			let reqBody = {};
			reqBody['primary'] = "招投标";
			reqBody['secondary'] = "我需要";
			let result = await this.$apis.findMatchingDictionary(reqBody);
			let list = result.data;
			for (let i = 0; i < list.length; i++) {
				let wxyValue = {};
				wxyValue['value'] = list[i].name;
				wxyValue['label'] = list[i].name;
				this.wxyList.push(wxyValue)
			}
		},
		//查询匹配 我意向  字典数据
		async wyxDictionary(){
			let reqBody = {};
			reqBody['primary'] = "招投标";
			reqBody['secondary'] = "我意向";
			let result = await this.$apis.findMatchingDictionary(reqBody);
			let list = result.data;
			for (let i = 0; i < list.length; i++) {
				let wyxValue = {};
				wyxValue['value'] = list[i].name;
				wyxValue['label'] = list[i].name;
				this.wyxList.push(wyxValue)
			}
		},
		selectKey(e){
			this.keywords[e].selected = !this.keywords[e].selected;
		},
		// 选择
		selectConfirmWs(e) {
			if(e[0].value=="个人"){
				this.iam = 0
			}else if(e[0].value=="企业"){
				this.iam = 1
			}else{
				this.iam = 2
			}
			this.model.ws = '';
			e.map((val, index) => {
				this.model.ws += this.model.ws == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmWxy(e) {
			this.model.wxy = '';
			e.map((val, index) => {
				this.model.wxy += this.model.wxy == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmWyx(e) {
			this.model.wyx = '';
			e.map((val, index) => {
				this.model.wyx += this.model.wyx == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmSydy(e) {
			this.model.sydy = '';
			e.map((val, index) => {
				this.model.sydy += this.model.sydy == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmLyxy(e) {
			this.model.lyxy = '';
			e.map((val, index) => {
				this.model.lyxy += this.model.lyxy == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmzhh(e) {
			this.model.zhh = '';
			e.map((val, index) => {
				this.model.zhh += this.model.zhh == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmPpsx(e) {
			this.model.ppsx = '';
			e.map((val, index) => {
				this.model.ppsx += this.model.ppsx == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmSyxb(e) {
			if(e[0].value=="不限"){
				this.sex = 0
			}else if(e[0].value=="女"){
				this.sex = 1
			}else{
				this.sex = 2
			}
			this.model.syxb = '';
			e.map((val, index) => {
				this.model.syxb += this.model.syxb == '' ? val.label : '-' + val.label;
			});
		}
	}
};
</script>
<style scoped lang="scss">
page {
	background: #f5f5f9;
}
.warp {
	background: #fff;
}
.count {
	.count-to {
		font-size: 24rpx;
	}
	text {
		padding: 2rpx 12rpx;
		background: #ff9e21;
		color: #ffffff;
		font-size: 24rpx;
	}
}
.group {
	padding: 6rpx 21rpx;
	background: #f1f7ff;
	border-radius: 6rpx;
	margin: 30rpx 30rpx 0 30rpx;
}
.button {
	width: 662rpx;
	margin:224rpx auto 95rpx auto;
	background: #ab61ff;
	border-radius: 40rpx;
	border: 0;
	color: #fff;
	&.u-hairline-border:after {
		border: 0;
	}
}
.word {
	font-size: 36rpx;
	color: #0d1d36;
	font-weight: bold;
}
.keywords {
	display: flex;
	flex-flow: wrap;
	view {
		margin:0 20rpx 20rpx 0;
		padding: 8rpx 21rpx;
		background: #f6f6f6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text {
			display: block;
			width: 16rpx;
			height: 16rpx;
			margin-left:19rpx;
			border: 4rpx solid #BDBDBD;
			border-radius: 8rpx;

		}
		&.selected {
			color:#4B9CFF;
			text {border-color:#4B9CFF;background-color: #4B9CFF;}
		}
	}
}
	.qita {

		image {
			width: 29rpx;
			height: 29rpx;
			;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>
